<template>
  <s-clean-layout :title="getTagTypeText()" navbar="normal">
    <view class="tag-select-container">
      <!-- 添加标签按钮 -->
      <view class="add-tag-btn" @tap="showAddTagDialog">
        <text class="add-tag-text">添加{{ getTagTypeText() }}</text>
      </view>

      <!-- 所有标签列表 -->
      <view class="tag-list-container">
        <view 
          v-for="tag in allTags" 
          :key="tag.id" 
          class="tag-item"
          :class="{ 'selected': isTagSelected(tag) }"
          @tap="toggleTag(tag)"
        >
          <view class="tag-color" :style="{ backgroundColor: tag.color || '#CCCCCC' }"></view>
          <text class="tag-name">{{ tag.tagName }}</text>
          <text v-if="isTagSelected(tag)" class="check-icon">✓</text>
        </view>
      </view>

      <!-- 底部间距，确保内容不被底部保存按钮遮挡 -->
      <view style="height: 120rpx;"></view>
      
      <!-- 底部保存按钮 -->
      <view class="bottom-save-button" @tap="saveSelection">
        <text>完成</text>
      </view>

      <!-- 添加标签弹窗 -->
      <view class="popup-mask" v-if="showPopup" @tap="closeAddTagDialog">
        <view class="popup-content-wrapper" @tap.stop>
          <view class="popup-header">
            <text class="popup-cancel" @tap="closeAddTagDialog">取消</text>
            <text class="popup-title">添加{{ getTagTypeText() }}</text>
            <text class="popup-confirm" @tap="confirmAddTag">完成</text>
          </view>
          <view class="popup-content">
            <input
              class="tag-input"
              v-model="newTagContent"
              placeholder="请输入标签名称"
              maxlength="10"
              focus
            />
            
            <!-- 颜色选择器 -->
            <view class="color-selector">
              <text class="color-label">选择颜色</text>
              <view class="color-options">
                <view 
                  v-for="color in colorOptions" 
                  :key="color"
                  class="color-option"
                  :class="{ 'selected': selectedColor === color }"
                  :style="{ backgroundColor: color }"
                  @tap="selectColor(color)"
                >
                  <text v-if="selectedColor === color" class="color-check">✓</text>
                </view>
              </view>
            </view>
          </view>
          <view class="popup-footer">
            <button class="confirm-btn" @tap="confirmAddTag">完成</button>
          </view>
        </view>
      </view>
    </view>
  </s-clean-layout>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import TagApi from '@/sheep/api/tag/tag';
import CommApi from '@/sheep/api/comm/comm'; // 导入CommApi

// 标签类型
const tagType = ref('LIKE');
// 联系人ID
const contactId = ref(0);
// 所有标签
const allTags = ref([]);
// 已选标签
const selectedTags = ref([]);
// 新标签内容
const newTagContent = ref('');
// 弹窗显示状态
const showPopup = ref(false);

// 颜色选项
const colorOptions = ref([
  '#FF6B6B', '#4CAF50', '#2196F3', '#9C27B0', '#FF9800', 
  '#795548', '#607D8B', '#E91E63', '#00BCD4', '#FFEB3B'
]);
// 选中的颜色
const selectedColor = ref('#FF6B6B');

// 检查标签是否已选择
const isTagSelected = (tag) => {
  // 使用tagId作为标识符
  return selectedTags.value.some(item => item.tagId === tag.tagId);
};

// 显示添加标签弹窗
const showAddTagDialog = () => {
  showPopup.value = true;
  newTagContent.value = '';
  selectedColor.value = '#FF6B6B'; // 弹窗打开时重置颜色
};

// 关闭添加标签弹窗
const closeAddTagDialog = () => {
  showPopup.value = false;
};

// 获取标签类型文本
const getTagTypeText = () => {
  const typeMap = {
    LIKE: '爱好',
    NOTLIKE: '讨厌',
    EAT: '口味',
    HABIT: '习惯',
    SKILL: '专业技能'
  };
  return typeMap[tagType.value] || '标签';
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 保存选择并返回
const saveSelection = () => {
  console.log('保存选择的标签:', tagType.value, selectedTags.value);
  
  try {
    // 获取当前页面实例
    const currentPage = getCurrentPages()[getCurrentPages().length - 1];
    
    // 尝试获取事件通道
    const eventChannel = currentPage.getOpenerEventChannel();
    
    if (eventChannel && eventChannel.emit) {
      console.log('通过事件通道传递标签数据');
      eventChannel.emit('updateTags', tagType.value, selectedTags.value);
    } else {
      console.warn('无法获取事件通道，将使用本地存储传递数据');
      // 使用本地存储传递数据
      uni.setStorageSync('needUpdateTags', {
        type: tagType.value,
        tags: selectedTags.value
      });
    }
  } catch (e) {
    console.error('事件通道传递数据失败:', e);
    // 出错时使用本地存储作为备选方案
    uni.setStorageSync('needUpdateTags', {
      type: tagType.value,
      tags: selectedTags.value
    });
  }
  
  // 返回上一页
  uni.navigateBack();
};

// 加载标签数据
const loadTags = async () => {
  try {
    uni.showLoading({
      title: '加载中...'
    });
    
    console.log('加载标签数据，类型:', tagType.value, '联系人ID:', contactId.value);
    
    // 1. 先获取所有标签，使用CommApi
    const tagsRes = await TagApi.queryTags({
      tagType: tagType.value
    });
    
    if (tagsRes.code === 0) {
      console.log('获取到所有标签数据:', tagsRes.data);
      // 确保每个标签都有tagId字段
      allTags.value = (tagsRes.data || []).map(tag => ({
        ...tag,
        tagId: tag.id // 将id复制到tagId字段
      }));
      
      // 2. 再获取联系人已关联的标签
      if (contactId.value) {
        const contactTagsRes = await TagApi.queryContactTag({
          contactId: Number(contactId.value) || 0,
          tagType: tagType.value // 这里只需要查询当前类型的标签
        });
        
        if (contactTagsRes.code === 0 && contactTagsRes.data) {
          console.log('获取到联系人已关联标签:', contactTagsRes.data);
          // 过滤出当前类型的标签
          selectedTags.value = contactTagsRes.data.filter(tag => tag.tagType === tagType.value) || [];
        }
      }
      
      // 初始化已选标签（从上一页传递过来的）
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      
      try {
        console.log('尝试获取事件通道');
        let eventChannel;
        
        // 修改这里，使用与saveSelection相同的方式获取事件通道
        if (currentPage.getOpenerEventChannel) {
          eventChannel = currentPage.getOpenerEventChannel();
        } else if (currentPage.$vm && currentPage.$vm.$mp && currentPage.$vm.$mp.page) {
          eventChannel = currentPage.$vm.$mp.page.getOpenerEventChannel();
        } else if (currentPage.$page) {
          eventChannel = currentPage.$page.getOpenerEventChannel();
        }
        
        if (eventChannel) {
          console.log('事件通道获取成功，监听selectedTags事件');
          eventChannel.on('selectedTags', (data) => {
            console.log('接收到已选标签数据:', data);
            if (data && data.tags) {
              // 如果传递的是ID数组，需要找到对应的标签对象
              if (Array.isArray(data.tags) && data.tags.length > 0 && typeof data.tags[0] === 'number') {
                console.log('处理ID数组');
                // 使用tagId匹配
                selectedTags.value = allTags.value.filter(tag => data.tags.includes(tag.tagId));
              } else {
                console.log('直接使用传递的标签对象');
                selectedTags.value = data.tags;
              }
              console.log('处理后的已选标签:', selectedTags.value);
            }
          });
        } else {
          console.error('无法获取事件通道');
          // 尝试从本地存储获取数据
          try {
            const savedTags = uni.getStorageSync('selectedTagsTemp');
            if (savedTags && savedTags.type === tagType.value) {
              console.log('从本地存储获取标签数据:', savedTags);
              selectedTags.value = savedTags.tags;
              // 使用后清除数据
              uni.removeStorageSync('selectedTagsTemp');
            }
          } catch (storageErr) {
            console.error('获取本地存储标签数据失败:', storageErr);
          }
        }
      } catch (e) {
        console.error('获取事件通道失败:', e);
      }
    } else {
      console.error('获取标签失败:', tagsRes);
      uni.showToast({
        title: tagsRes.msg || '获取标签失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('加载标签失败', error);
    uni.showToast({
      title: '网络异常，请稍后重试',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 确认添加标签
const confirmAddTag = async () => {
  if (!newTagContent.value.trim()) {
    uni.showToast({
      title: '标签内容不能为空',
      icon: 'none'
    });
    return;
  }
  
  // 检查是否已存在相同内容的标签
  if (allTags.value.some(tag => tag.tagName === newTagContent.value.trim())) {
    uni.showToast({
      title: '该标签已存在',
      icon: 'none'
    });
    return;
  }
  
  try {
    uni.showLoading({
      title: '添加中...'
    });
    
    // 1. 先添加标签，使用CommApi
    const addTagRes = await TagApi.addTag({
      tagType: tagType.value,
      tagName: newTagContent.value.trim(),
      color: selectedColor.value // 添加颜色
    });
    
    if (addTagRes.code === 0) {
      // 注意：addTag返回的data是标签ID而不是标签对象
      const tagId = addTagRes.data;
      
      // 创建新标签对象
      const newTag = {
        id: tagId,
        tagType: tagType.value,
        tagName: newTagContent.value.trim(),
        color: selectedColor.value // 添加颜色
      };
      
      console.log('创建的新标签:', newTag);
      
      // 添加到标签列表
      allTags.value.push(newTag);
      
      // 2. 如果有联系人ID，则关联标签到联系人
      if (contactId.value) {
        const addContactTagRes = await TagApi.addContactTag({
          contactId: contactId.value,
          tagId: tagId
        });
        
        if (addContactTagRes.code === 0) {
          // 自动选中新添加的标签
          selectedTags.value.push(newTag);
        } else {
          console.error('关联标签到联系人失败:', addContactTagRes);
        }
      } else {
        // 自动选中新添加的标签
        selectedTags.value.push(newTag);
      }
      
      // 关闭弹窗
      closeAddTagDialog();
      
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      });
    } else {
      uni.showToast({
        title: addTagRes.msg || '添加失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('添加标签失败', error);
    uni.showToast({
      title: '网络异常，请稍后重试',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 切换标签选择状态
const toggleTag = async (tag) => {
  const index = selectedTags.value.findIndex(item => item.id === tag.id);
  
  if (contactId.value) {
    // 有联系人ID，需要调用接口关联或解除关联
    try {
      if (index > -1) {
        // 取消选择，解除关联
        const res = await TagApi.deleteContactTag({
          contactId: contactId.value,
          tagId: tag.id
        });
        
        if (res.code === 0) {
          // 从已选列表移除
          selectedTags.value.splice(index, 1);
        } else {
          uni.showToast({
            title: res.msg || '操作失败',
            icon: 'none'
          });
        }
      } else {
        // 选择标签，添加关联
        const res = await TagApi.addContactTag({
          contactId: contactId.value,
          tagId: tag.id
        });
        
        if (res.code === 0) {
          // 添加到已选列表
          selectedTags.value.push(tag);
        } else {
          uni.showToast({
            title: res.msg || '操作失败',
            icon: 'none'
          });
        }
      }
    } catch (error) {
      console.error('操作标签失败', error);
      uni.showToast({
        title: '网络异常，请稍后重试',
        icon: 'none'
      });
    }
  } else {
    // 没有联系人ID，只在本地切换状态
    if (index > -1) {
      // 取消选择
      selectedTags.value.splice(index, 1);
    } else {
      // 选择标签
      selectedTags.value.push(tag);
    }
  }
};

// 删除标签
const deleteTag = async (tag) => {
  try {
    uni.showModal({
      title: '提示',
      content: '确定要删除该标签吗？',
      success: async (res) => {
        if (res.confirm) {
          uni.showLoading({
            title: '删除中...'
          });
          
          // 如果有联系人ID，先解除关联
          if (contactId.value) {
            await TagApi.deleteContactTag({
              contactId: contactId.value,
              tagId: tag.id
            });
          }
          
          // 这里应该调用删除标签的接口，但根据提供的API，没有删除标签的接口
          // 所以只能从列表中移除
          const index = allTags.value.findIndex(item => item.id === tag.id);
          if (index > -1) {
            allTags.value.splice(index, 1);
          }
          
          // 如果已选中，也从已选列表移除
          const selectedIndex = selectedTags.value.findIndex(item => item.id === tag.id);
          if (selectedIndex > -1) {
            selectedTags.value.splice(selectedIndex, 1);
          }
          
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          
          uni.hideLoading();
        }
      }
    });
  } catch (error) {
    console.error('删除标签失败', error);
    uni.showToast({
      title: '网络异常，请稍后重试',
      icon: 'none'
    });
  }
};

// 选择颜色
const selectColor = (color) => {
  selectedColor.value = color;
};

// 修复获取URL参数的方法
onMounted(() => {
  // 获取URL参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  
  // 尝试多种方式获取options
  let options = {};
  
  // 方法1: 直接从页面对象获取
  if (currentPage.options) {
    options = currentPage.options;
  } 
  // 方法2: 从$page对象获取
  else if (currentPage.$page && currentPage.$page.options) {
    options = currentPage.$page.options;
  } 
  // 方法3: 从$vm.$mp.query获取
  else if (currentPage.$vm && currentPage.$vm.$mp && currentPage.$vm.$mp.query) {
    options = currentPage.$vm.$mp.query;
  }
  // 方法4: 从route获取
  else {
    const query = currentPage.route ? currentPage.route.split('?')[1] : '';
    if (query) {
      query.split('&').forEach(param => {
        const [key, value] = param.split('=');
        options[key] = decodeURIComponent(value);
      });
    }
  }
  
  console.log('获取到的参数:', options);
  
  // 设置标签类型
  if (options.type) {
    tagType.value = options.type;
  }
  
  // 设置联系人ID，确保是数字类型
  if (options.contactId) {
    // 使用Number()而不是parseInt()，避免可能的解析问题
    contactId.value = Number(options.contactId) || 0;
    console.log('设置联系人ID:', contactId.value);
  }
  
  // 加载标签数据
  loadTags();
  
  // 检查是否有通过本地存储传递的标签数据
  try {
    const savedTags = uni.getStorageSync('selectedTagsTemp');
    if (savedTags && savedTags.type === tagType.value) {
      console.log('从本地存储获取标签数据:', savedTags);
      selectedTags.value = savedTags.tags;
      // 使用后清除数据
      uni.removeStorageSync('selectedTagsTemp');
    }
  } catch (e) {
    console.error('获取本地存储标签数据失败:', e);
  }
});
</script>

<style lang="scss" scoped>
.tag-select-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-top: 20rpx;
}

/* 移除原有的header样式 */
.header {
  display: none;
}

/* 底部保存按钮样式 */
.bottom-save-button {
  position: fixed;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 90rpx;
  background-color: #2196F3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  z-index: 100;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  border-radius: 45rpx;
  margin-bottom: env(safe-area-inset-bottom);
}

.add-tag-btn {
  margin: 30rpx;
  height: 88rpx;
  background-color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-tag-text {
  color: #007AFF;
  font-size: 32rpx;
}

.section-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
}

.tag-list-container {
  background-color: #fff;
  margin-top: 20rpx;
}

.tag-list {
  background-color: #fff;
  padding: 10rpx;
  display: flex;
  flex-wrap: wrap;
}

/* 重新设计标签项样式 */
.tag-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
}

.tag-item.selected {
  background-color: #f8f8f8;
}

.tag-color {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.tag-name {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  text-align: left;
  padding-right: 60rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.check-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #007AFF;
  font-size: 32rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-section {
  margin-top: 20rpx;
}

.tag-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
  box-sizing: border-box;
}

/* 弹窗样式重新设计 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content-wrapper {
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.popup-cancel {
  color: #333;
  font-size: 32rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.popup-confirm {
  color: #007AFF;
  font-size: 32rpx;
}

.popup-content {
  padding: 30rpx;
}

.popup-footer {
  padding: 20rpx 30rpx 40rpx;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* 颜色选择器样式 */
.color-selector {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
}

.color-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.color-option {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid transparent;
  box-sizing: border-box;
}

.color-option.selected {
  border-color: #007AFF;
}

.color-check {
  font-size: 32rpx;
  color: #fff;
}
</style>
